<template>
  <div class="MenuComponent">
    <el-card class="box-card">
      <el-button type="primary" 
      style="margin-bottom: 1vh"
      @click="addMenu">新增菜单</el-button>
      <el-button type="warning" style="margin-bottom: 1vh">菜单编辑</el-button>
      <el-button type="danger" style="margin-bottom: 1vh"
        >删除菜单节点</el-button
      >
      <el-scrollbar height="60vh">
        <el-tree
          :data="menuTree"
          :props="props"
          :default-expand-all="true"
          @check-change="MenuChange"
          show-checkbox
          node-key="menu_id"
        >
        </el-tree>
      </el-scrollbar>
    </el-card>

    <el-dialog
      v-model="addFlag"
      title="新增菜单"
      width="30%"
    >
        <el-form
        :model="MenuForm" 
        ref="ruleFormRef" 
        status-icon 
        :rules="MenuAddRules"
        label-width="120px">
            <el-form-item label="父节点" prop="parent_id">
                <el-select v-model="parentNode" placeholder="请选择父级目录">
                    <el-option
                    v-for="item in RootNodeList"
                    :key="item.menu_id"
                    :label="item.menu_name"
                    :value="item.menu_id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menu_name">
                <el-input v-model="MenuForm.menu_name" placeholder="输入菜单名称"/>
            </el-form-item>
            <el-form-item label="模版映射名称" prop="menu_module">
                <el-select v-model="parentNode" placeholder="模版映射名称">
                    <el-option
                    v-for="item in getFiles()"
                    :key="item"
                    :label="item"
                    :value="item"
                    />
                </el-select>
            </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive ,ref} from "vue";
import { useStore } from "vuex";
import getFiles from '../util/ViewFileName'
const props = {
  children: "children",
  label: "menu_name",
};
const parentNode = ref();
const MenuForm = reactive({
    menu_name:'',
    menu_module:'',
    parent_id: null,
    path: '',
    icon : '',
    type : null,
    meta:''
})
const addFlag = ref(false);
const store = useStore();
const menuTree = reactive([]);
const QueryMenuTree = async () => {
  let menu = await store.dispatch("QueryMenuList");
  Object.assign(menuTree, menu);
};
onMounted(() => {
  QueryMenuTree();
  console.log(getFiles());
});
const activeNodeList = [];
const MenuChange = (node, parent, children) => {
  parent ? mergeNode(node.menu_id) : delNode(node.menu_id);
};
const mergeNode = (node) => {
  if (!activeNodeList.includes(node)) {
    activeNodeList.push(node);
  } else {
    return false;
  }
};
const delNode = (node) => {
  activeNodeList.forEach((item, index) => {
    if (item === node) {
      activeNodeList.splice(index, 1);
    }
  });
};
const RootNodeList = reactive([])
const addMenu = async () => {
    addFlag.value = true
    let res = await store.dispatch('QueryRootNode')
    Object.assign(RootNodeList,res)
}
</script>

<style scoped>
.MenuComponent {
  width: 100%;
  height: 92vh;
}
.box-card {
  width: 35%;
  height: 80vh;
  border-radius: 20px;
}
</style>